{% extends 'sales/base.html' %}
{% load static %}
{% load thumbnail %}
{% block breadcrumb %}
{% block extralinks %}
<link rel="stylesheet" href="{% static 'css/bootstrap-suggest.css' %}">
<style>
  .opacity_block {
    opacity: 0.2;
  }
</style>
{% endblock extralinks %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"> <a href="{% url 'contacts:list' %}">Contacts</a></li>
    <li class="breadcrumb-item active">{{contact_record.first_name}} {{contact_record.last_name}}</li>
  </ol>
</nav>
{% endblock %}
{% block content %}

<div class="main_container" id="maincontainer">
  <div class="overview_form_block row marl justify-content-center">
    <div class="col-md-8" id="opacity_block">
      <div class="card">

        <div class="card-body" id="datashow">

          <div class="card-title text-right">
            <h5>
              <span class="float-left title">Overview</span>
              <span class="" style="margin-top: 0px">
                <div class="dropdown buttons_row" style="width:auto; display:inline-block; left:0">
                  <button class="btn primary_btn dropdown-toggle" type="button" data-toggle="dropdown">Actions
                    <span class="caret"></span></button>
                  <ul class="dropdown-menu" style="width:fit-content; min-width:-webkit-fill-available; margin-top: 0;">
                    <li><a href="{% url 'contacts:edit_contact' contact_record.id %}"
                        style="background:#17a2b8; color: white; font-weight: 600;">Edit</a></li>
                  </ul>
                </div>
              </span>
            </h5>
          </div>

          <div class="row marl">
            <div class="col-md-4">
              <div class="filter_col col-md-12" id="iname">
                <div class="form-group">
                  <label class="contact_field_label" for="id_name" data-name="name">Name</label>
                  <div class="contact_field" id="contact_name" data-name="name">{{ contact_record.first_name }}
                    {{ contact_record.last_name }}</div>
                </div>
              </div>
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="contact_field_label" for="id_phone" data-name="name">Phone</label>
                  <div class="contact_field" id="contact_phone" data-name="name">{{ contact_record.phone }}</div>
                </div>
              </div>

            </div>
            <div class="col-md-4">
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="contact_field_label" for="id_email" data-name="name">Email</label>
                  <div class="contact_field" id="contact_email" data-name="name">{{ contact_record.email }}</div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="filter_col col-md-12">
                <div class="form-group">
                  {% if contact_record.address.address_line or contact_record.address.street or contact_record.address.city or  contact_record.address.state or contact_record.address.postcode or contact_record.address.country %}
                  <label class="contact_field_label" for="id_address" data-name="name">Billing Address</label>
                  <div class="contact_field" id="contact_address" data-name="name">
                    {{contact_record.address.get_complete_address}}
                  </div>
                  {% endif %}
                </div>
              </div>
              <div class="filter_col col-md-12">
                <div class="form-group">
                  {% if contact_record.description %}
                  <label class="contact_field_label" for="id_description" data-name="name">Description</label>
                  <div class="contact_field" id="contact_description" data-name="name">{{ contact_record.description }}
                  </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="created_information">
                Created by <b>{{ contact_record.created_by }}</b> created on
                <b title="{{ contact_record.created_on }}">{{ contact_record.created_on_arrow }}</b>
              </div>
            </div>
          </div>
        </div>

        
        <div>
          <div class="card-body mar-top" id="datashow">
            <div class="card-title view-pad">
              <h5>Attachments</h5>
            </div>
            <div class="row marl">
              <div class="col-md-12">
                <form id="attachment_form" method="POST" enctype="multipart/form-data">
                  <div class="form-group ">
                    <input type="file" class="form-control-file" cols="40" id="id_attachments" name="attachment">
                    <div>
                      <p id="AttachmentError" style="display:none; color:red"></p>
                    </div>
                    <br>
                    <div class="buttons_row">
                      <button class="btn btn-default save" style="text-align: center;"
                        id="attachment_submit">Save</button>
                    </div>
                  </div>
                  <input type="hidden" value="{{contact_record.id}}" name="contactid">
                </form>
                <ul class="list-group" id="attachment_div">
                  {% for attachment in attachments %}
                  <li class="list-group-item list-row" id="attachment{{attachment.id}}">
                    {% if request.user.is_superuser or request.user.role == 'ADMIN' or request.user == attachment.created_by %}
                    <div class="float-right right-container">
                      <div class="list-row-buttons btn-group float-right">
                        <button class="action btn primary_btn"
                          onclick="remove_attachment({{attachment.id}})">Remove</button>
                      </div>
                    </div>
                    {% endif %}

                    <div class="stream-post-container" id="attachment_name{{attachment.id}}">
                      {% if attachment.attachment %}
                      {% if 'image' in attachment.file_type %}
                      {% thumbnail attachment.attachment "80x80" crop="center" as im %}
                      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="mb-2">
                      {% endthumbnail %}
                      {% endif %}
                      {% endif %}
                      <pre> <span class="icon"><i style="font-size:1.5rem;" class="{{attachment.get_file_type_display}}"></i>{{attachment.file_name}} </span> <a href="{% url 'common:download_attachment' attachment.id %}">Download</a></pre>
                    </div>

                    <div class="stream-container">
                      <pre class="float-left">Uploaded by :{{ attachment.created_by }}</pre>
                      <pre class="float-right date"
                        title="{{ attachment.created_on }}">{{ attachment.created_on_arrow }}</pre>
                    </div>
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
          

          

          <div class="card-body" id="datashow">
            <div class="card-title view-pad">
              <h5>Comments</h5>
            </div>
            <div class="row marl">
              <div class="col-md-12">
                <form id="comment_form" method="POST" enctype="multipart/form-data">
                  <div class="form-group">
                    <textarea class="form-control mentions" textarea cols="40" rows="3" id="id_comments" name="comment"
                      placeholder="Submit Your Comments Here"></textarea>
                    <div>
                      <p id="CommentError" style="display:none; color:red"></p>
                    </div>
                    </br>
                    <div class="buttons_row">
                      <button class="btn btn-default save" style="text-align: center;" id="comment_submit"
                        type="submit">Submit</button>
                    </div>
                  </div>
                  <input type="hidden" value="{{contact_record.id}}" name="contactid">
                </form>
                <ul class="list-group" id="comments_div">
                  {% for comment in comments %}
                  <li class="list-group-item list-row" id="comment{{comment.id}}">
                    {% if request.user.is_superuser or request.user.role == 'ADMIN' or request.user == comment.commented_by %}
                    <div class="float-right right-container">
                      <div class="list-row-buttons btn-group float-right">
                        <button class="btn primary_btn btn-sm dropdown-toggle" data-toggle="dropdown"
                          type="button">Actions <span class="caret"></span></button>
                        <ul class="dropdown-menu text-center"
                          style='width: fit-content; min-width: -webkit-fill-available;'>
                          <li>
                            <a style='padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;'
                              class="action" onclick="edit_comment({{comment.id}})">Edit</a>
                          </li>
                          <li>
                            <a style='padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;'
                              class="action" onclick="remove_comment({{comment.id}})">Remove</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    {% endif %}
                    <div class="stream-post-container" id="comment_name{{comment.id}}">
                      <pre>{{ comment.comment }}</pre>
                    </div>
                    <div class="stream-container">
                      <pre class="float-left">{{ comment.commented_by }}</pre>
                      <pre class="float-right"
                        title="{{ comment.commented_on }}">{{ comment.commented_on_arrow }}</pre>
                    </div>
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
            <div class="modal fade" id="Comments_Contacts_Modal" role="dialog" data-keyboard="false"
              data-backdrop="static">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">Update Your Comment</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                  </div>
                  <form id="comment_edit_form" method="POST">
                    <div class="modal-body">
                      <div class="form-group">
                        <textarea class="form-control mentions" textarea cols="40" rows="3" id="id_editcomment"
                          name="comment" placeholder="Submit Your Comments" style="color:black;"></textarea>
                        <span>
                          <p id="CommentEditError" style="display:none; color:red"></p>
                        </span>
                        <input type="hidden" value="{{ contact.id }}" name="contactid">
                        <input type="hidden" value="" name="commentid" id="commentid">
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button class="btn btn-default save" id="comment_edit" type="submit">Update</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <br>
      <form method='GET' class="accountdetails_row">
        <div class="table_container_row row marl no-gutters">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="panel-heading-list card-title view-pad">
                  Tasks
                  
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed ">
                    {% if tasks|length > 0 %}
                    <thead>
                      <tr>
                        <th width="5%" style="text-align:center;">S.No</th>
                        <th width="30%" style="text-align:center;">Title</th>
                        <th width="20%" style="text-align:center;">Status</th>
                        <th width="20%" style="text-align:center;">Priority</th>
                        <th width="25%" style="text-align:center;">Actions </th>
                      </tr>
                    </thead>
                    {% endif %}
                    <tbody>
                      {% for task in tasks %}
                      <tr id="task_{{task.id}}" class="text-center">
                        <td class="text-center" scope="row">{{ forloop.counter }}</td>
                        <td class="text-center">{{task.title}}</td>
                        <td class="text-center">{{task.status}}</td>
                        <td class="text-center">{{task.priority}} {% if task.probability %} % {% endif %}</td>
                        <td class="actions text-center">
                          <a href="{% url 'tasks:task_detail' task.id %}" class="btn btn-primary"
                            style="color: white;">View</a>
                          <a href="{% url 'tasks:task_edit' task.id %}?view_account={{account_record.id}}"
                            class="btn btn-success">Edit</a>
                          <a href="{% url 'tasks:task_delete' task.id %}?view_account={{account_record.id}}"
                            class="btn btn-danger">Remove</a>
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal tasks|length 0 %}
                <h6 class="text-center">No tasks Records Found</h6>
                {% endifequal %}
              </div>
            </div>
            <br clear="all">
          </div>
        </div>
      </form>
    </div>
    <div class="overview_form_block row marl justify-content-center" id="loading_spinner"
      style="z-index: 10; left: 0; right: 0; vertical-align: middle; position: absolute; margin-top: 15%;">

      <div class="spinner-border text-primary" style="width: 5em; height: 5em;" role="status">
        <span class="sr-only">Processing File...</span>
      </div>
    </div>
  </div>
  
  {% endblock%}
  {% block js_block %}
  <script type="text/javascript">
    $('#loading_spinner').hide()

    var assigned_to_list = "{{ assigned_data }}";
    assigned_to_list = JSON.parse(assigned_to_list.replace(/&(l|g|quo)t;/g, function (a, b) {
      return {
        l: '<',
        g: '>',
        quo: '"'
      }[b];
    }));


    function resetForm() {
      $('#CommentEditError').hide()
      document.getElementById("CommentEditError").reset();
    }

    $("#comment_form").submit(function (e) {
      e.preventDefault()
      var formData = new FormData($("#comment_form")[0]);
      $.ajax({
        url: "{% url 'contacts:add_comment' %}",
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          if (data.error) {
            $("#CommentError").html(data.error).show()
          } else {
            d = new Date(data.commented_on);
            let options = {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
              hour: '2-digit',
              minute: '2-digit'
            };
            d = d.toLocaleString('en-us', options);
            $("#comments_div").prepend("<li class='list-group-item list-row' id='comment" + data.comment_id + "'>" +
              "<div class='float-right right-container'>" +
              "<div class='list-row-buttons btn-group float-right'>" +
              "<button class='btn primary_btn btn-sm dropdown-toggle' data-toggle='dropdown' type='button'><span class='caret'></span>Actions</button>" +
              "<ul class='dropdown-menu text-center' style='width: fit-content; min-width: -webkit-fill-available;'>" +
              "<li><a style='padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;' class='action' onclick='edit_comment(" + data.comment_id + ")'>Edit</a></li>" +
              "<li><a style='padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;' class='action' onclick='remove_comment(" + data.comment_id + ")''>Remove</a></li></ul></div></div>" +
              "<div class='stream-post-container' id='comment_name" + data.comment_id + "'><pre>" + data.comment + "</pre></div>" +
              "<div class='stream-container'><pre class='float-left'>" + data.commented_by + "</pre><pre class='float-right' title='" + d.toLocaleString('en-US', { hour12: true }) + "'>" + data.commented_on_arrow + "</pre></div>"
            )
            $("#id_comments").val("")
            alert("Comment Submitted")
            $("#CommentError").html("")
          }
        }
      })
    })


    function edit_comment(x) {
      $('#Comments_Contacts_Modal').modal('show');
      comment = $("#comment_name" + x).text()
      $("#commentid").val(x)
      $("#id_editcomment").val(comment)
    }

    $("#comment_edit").click(function (e) {
      e.preventDefault()
      var formData = new FormData($("#comment_edit_form")[0]);
      $.ajax({
        url: "/contacts/comment/edit/",
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          if (data.error) {
            $("#CommentEditError").html(data.error).show()
          } else {
            $("#comment_name" + data.commentid).html('<pre>' + data.comment + '</pre>')
            $('#Comments_Contacts_Modal').modal('hide');
            $("#id_editcomment").val("")
            $("#CommentEditError").html("")
          }
        }
      })
    })

    function HideError(e) {
    }
    function HideError(e) {
      $("#CommentError").hide()
      $("#AttachmentError").hide()
    }

    function remove_comment(x) {
      var con = confirm("Do you want to Delete it for Sure!?")
      if (con == true) {
        $.post('/contacts/comment/remove/', {
          "comment_id": x
        }, function (data) {
          if (data.error) {
            alert(data.error)
          } else {
            $("#comment" + data.cid).remove()
          }
        })
      }
    }
    $("#attachment_form").submit(function (e) {
      e.preventDefault()
      const formData = new FormData($("#attachment_form")[0]);
      $.ajax({
        url: "{% url 'contacts:add_attachment' %}",
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function () {
          $('#loading_spinner').show()
          $('#opacity_block').addClass('opacity_block')
        },
        success: function (data) {
          if (data.error) {
            $("#AttachmentError").html(data.error).show()
            $('#loading_spinner').hide()
            $('#opacity_block').removeClass('opacity_block')
          } else {
            d = new Date(data.created_on)
            let options = {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
              hour: '2-digit',
              minute: '2-digit'
            };
            d = d.toLocaleString('en-us', options);
            $("#attachment_div").prepend(
              "<li class='list-group-item list-row' id='attachment" + data.attachment_id + "'>" +
              "<div class='float-right right-container'><div class='list-row-buttons btn-group float-right'><button class='action btn primary_btn' onclick='remove_attachment(" + data.attachment_id + ")''>Remove</button></div></div>" +
              "<div class='stream-post-container' id='attachment_name" + data.attachment_id + "'>" +
              `${(data.file_type[0]).startsWith('image') ? `<img src=${data.attachment_url} width="80px" height="80px" class="mb-2">` : ''}` +
              "<pre><span class='icon'><i style='font-size:1.5rem;' class='" + data.attachment_display + "'></i>&nbsp;&nbsp;</span>" + data.attachment + "&nbsp; &nbsp;<a href='" + data.download_url + "'>Download</a></pre></div>" +
              "<div class='stream-container'><pre class='float-left'>" + data.created_by + "</pre><pre class='float-right date' title='" + d.toLocaleString('en-US', { hour12: true }) + "'>" + data.created_on_arrow + "</pre></div>" +
              "</li>"
            )
            $("#id_attachments").val("")
            // alert("Attachment Saved")
            $("#AttachmentError").html("")
            $('#loading_spinner').hide()
            $('#opacity_block').removeClass('opacity_block')
            setTimeout(() => {
              alert("Attachment Saved")
            }, 100);
          }
        }
      })
    })

    function remove_attachment(x) {
      const con = confirm("Do you want to Delete it for Sure!?");
      if (con == true) {
        $.post('{% url "leads:remove_attachment" %}', {
          "attachment_id": x
        }, function (data) {
          if (data.error) {
            alert(data.error)
          } else {
            $("#attachment" + data.aid).remove()
          }
        })
      }
    }
    $('#remove_contact').click(function (e) {
      var result = confirm("Are You Sure You Want to delete?");
      if (result == false) {
        e.preventDefault()
      }
    });

  </script>
  <script src="{% static 'js/bootstrap-suggest.js' %}"></script>
  <script>
    $('.mentions').suggest('@', {
      data: {{ users_mention| safe}},
      map: function (user) {
        return {
          value: user.username,
          text: '<strong>' + user.username + '</strong>'
        }
      }
  })
  </script>
  {% endblock js_block %}